<template>
  <el-dialog
    :title="title"
    v-model="dialogVisible"
    @close="dialogFormVisible"
    width="800px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <h2 class="title">{{ info.title }}</h2>
    <div class="type-name">{{ info.type_name }}</div>
    <el-divider></el-divider>
    <div class="content" v-html="info.content"></div>
    <img
      v-if="info.image_url"
      :src="info.image_url"
      class="img"
      style="margin-top: 10px; max-height: 400px; border-radius: 4px; max-width: 100%"
    />
    <template #footer>
      <el-button @click="cancelFunc">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref } from "vue";
const title = ref("内容预览");
const dialogVisible = ref(false);
const info = ref<any>();

const dialogFormVisible = () => {
  dialogVisible.value = false;
};
const open = (row?: any) => {
  info.value = row;
  dialogVisible.value = true;
};
/*取消*/
const cancelFunc = () => {
  dialogFormVisible();
};
defineExpose({ open });
</script>

<style lang="scss" scoped>
.title {
  font-size: 24px;
  padding: 10px 0;
}
.type-name {
  font-size: 14px;
  color: #909399;
}
</style>
